<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 799px;
            height: 800px;
            background-color: rgb(81, 178, 248);
            margin: 100px auto 0 ;
            overflow: hidden;
        }
        #box>div{
            width: 150px;
            height: 100px;
            box-sizing: border-box;
            border: 1px solid rgb(255, 156, 156);
            float: left;
            margin: 0 12px 10px 0;
            padding: 10px;
            background-color: rgb(71, 71, 71);
            /* position: relative; */
        }
        #box>div:nth-child(5n){
            margin-right: 0px;
        }
        #box>div>img:first-child{
            display: block;
            width: 130px;
            height: 80px;
            border: 1px solid rgb(255, 243, 243);
            box-sizing: border-box;
            cursor: pointer;
        }
        #box>div>img:last-child{
            display: block;
            width: 250px;
            height: 150px;
            border: 1px solid rgb(255, 243, 243);
            box-sizing: border-box;
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }
        #box>div:nth-child(1)>img:last-child{
            display: none;
            z-index: 2;
            top: 100px;
            left: 290px;
        }
        #box>div:nth-child(1):hover>img:first-child+img:last-child{
                    display: block;
                    z-index: 2;
        }
        #box>div:nth-child(2)>img:last-child{
            display: none;
            top: 100px;
            left: 480px;
        }
        #box>div:nth-child(2):hover>img:first-child+img:last-child{
                    display: block;
                    z-index: 2;
        }
        #box>div:nth-child(3)>img:last-child{
            display: none;
            top: 100px;
            left: 640px;
        }
        #box>div:nth-child(3):hover>img:first-child+img:last-child{
                    display: block;
                    z-index: 2;
        }
        #box>div:nth-child(4)>img:last-child{
            display: none;
            top: 100px;
            left: 790px;
        }
        #box>div:nth-child(4):hover>img:first-child+img:last-child{
                    display: block;
                    z-index: 2;
        }
        #box>div:nth-child(4)>img:last-child{
            display: none;
            top: 100px;
            left: 790px;
        }
        #box>div:nth-child(4):hover>img:first-child+img:last-child{
                    display: block;
                    z-index: 2;
        }
        #box>div:nth-child(5)>img:last-child{
            display: none;
            top: 100px;
            left: 1000px;
        }
        #box>div:nth-child(5):hover>img:first-child+img:last-child{
                    display: block;
                    z-index: 2;
        }
        #box>div:nth-child(6):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(7):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(8):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(9):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(10):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(11):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(12):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(13):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(14):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(15):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(16):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(17):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(18):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
        #box>div:nth-child(19):hover>img:first-child{
            width: 250px;
            height: 150px;
                /* display: block; */
                position: absolute;
                z-index: 3;
                /* pointer-events: none; */
        }
    </style>
</head>
<body>
    <div id="box">
        <div><img class="id11"  src="./img/photo01.jpg"><img class="id1" src="./img/photo01.jpg"></div>
        <div><img class="id22"  src="./img/photo02.jpg"><img class="id2" src="./img/photo02.jpg"></div>
        <div><img class="id33"  src="./img/photo03.jpg"><img class="id3" src="./img/photo03.jpg"></div>
        <div><img class="id44"  src="./img/photo04.jpg"><img class="id4" src="./img/photo04.jpg"></div>
        <div><img class="id55"  src="./img/photo05.jpg"><img class="id5" src="./img/photo05.jpg"></div>
        <div><img class="id66"  src="./img/photo06.jpg"><img class="id6" src="./img/photo06.jpg"></div>
        <div><img class="id77"  src="./img/photo07.jpg"><img class="id7" src="./img/photo07.jpg"></div>
        <div><img class="id88"  src="./img/photo08.jpg"><img class="id8" src="./img/photo08.jpg"></div>
        <div><img class="id99"  src="./img/photo09.jpg"><img class="id9" src="./img/photo09.jpg"></div>
        <div><img class="id100" src="./img/photo10.jpg"><img class="id10" src="./img/photo10.jpg"></div>
        <div><img class="id111" src="./img/photo11.jpg"><img class="id11" src="./img/photo11.jpg"></div>
        <div><img class="id122" src="./img/photo12.jpg"><img class="id12" src="./img/photo12.jpg"></div>
        <div><img class="id133" src="./img/photo13.jpg"><img class="id13" src="./img/photo13.jpg"></div>
        <div><img class="id144" src="./img/photo14.jpg"><img class="id14" src="./img/photo14.jpg"></div>
        <div><img class="id155" src="./img/photo15.jpg"><img class="id15" src="./img/photo15.jpg"></div>
        <div><img class="id166" src="./img/photo16.jpg"><img class="id16" src="./img/photo16.jpg"></div>
        <div><img class="id177" src="./img/photo17.jpg"><img class="id17" src="./img/photo17.jpg"></div>
        <div><img class="id188" src="./img/photo18.jpg"><img class="id18" src="./img/photo18.jpg"></div>
        <div><img class="id199" src="./img/photo19.jpg"><img class="id19" src="./img/photo19.jpg"></div>
        <div><img class="id200" src="./img/photo20.jpg"><img class="id20" src="./img/photo20.jpg"></div>
    </div>
</body>
</html>